<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入layui样式文件 -->
    <link rel="stylesheet" href="./layui-v2.9.7/layui/css/layui.css">
</head>
<body>
    
    <button class="layui-btn">普通按钮</button>
    <button class="layui-btn layui-bg-blue">蓝色按钮</button>
    <button class="layui-btn layui-bg-orange">橙色按钮</button>
    <button class="layui-btn layui-bg-red">红色按钮</button>
    <button class="layui-btn layui-bg-purple">紫色按钮</button>

    <hr>

    <button class="layui-btn layui-btn-xs">超小按钮</button>
    <button class="layui-btn layui-btn-sm">小型按钮</button>
    <button class="layui-btn layui-btn-disabled">普通按钮</button>
    <button  class="layui-btn layui-btn-lg layui-btn-radius">大型按钮</button>
    <button  class="layui-btn layui-btn-lg layui-btn-radius">
        <i class="layui-icon layui-icon-login-wechat" style="font-size: 2em;"></i>
    </button>

    <div class="layui-anim layui-anim-scaleSpring" style="display:inline-block">
        <i class="layui-icon layui-icon-heart-fill" style="color:#f00;font-size: 3rem;"></i>
    </div>

    <h2>表格</h2>
    <!-- layui栅格系统（响应式布局） ，layui默认将网页宽度平局划分为12等份 -->
    <div class="layui-container">
        <div class="layui-col-md6 layui-col-md-offset3">
            <table class="layui-table" lay-size="lg" lay-skin="nob">
                <tr>
                    <td>单元格001</td>
                    <td>单元格002</td>
                    <td>单元格003</td>
                    <td>单元格004</td>
                </tr>
                <tr>
                    <td>单元格001</td>
                    <td>单元格002</td>
                    <td>单元格003</td>
                    <td>单元格004</td>
                </tr>
                <tr>
                    <td>单元格001</td>
                    <td>单元格002</td>
                    <td>单元格003</td>
                    <td>单元格004</td>
                </tr>
            </table>
        </div>
    </div>

    <div class="layui-container">

        <div class="layui-col-md4 layui-col-md-offset4">
            <h3>用户登录</h3>
            <hr>
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                      <input type="text" name="username" lay-verify="required" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                      <input type="password" name="password" lay-verify="required" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button type="button" class="layui-btn layui-btn-blue layui-btn-fluid" lay-submit lay-filter="reg">登录</button>
                </div>
            </form>
        </div>

    </div>
    


    <!-- 引入layui脚本文件 -->
    <script src="./layui-v2.9.7/layui/layui.js"></script>
</body>
</html>